<template>
  <el-table :data="filterTableData" border class="tabledata" :cell-style="cellStyle">
    <el-table-column prop="id" sortable label="序号" width="100px" />
    <el-table-column prop="name" sortable label="姓名" width="150px" />
    <el-table-column prop="age" sortable label="年龄" width="100px" />
    <el-table-column prop="gender" sortable label="性别" width="100px" />
    <el-table-column prop="email" sortable label="邮箱" />
    <el-table-column prop="phone" sortable label="电话" />
    <el-table-column prop="personNumber" sortable label="身份证号" />
    <el-table-column prop="address" sortable label="公司地址" />
    <el-table-column prop="status" sortable label="账号状态" />
    <el-table-column prop="isAttestation" sortable label="认证状态" />
    <el-table-column fixed="right" align="right" width="200px">
      <template #header>
        <el-input v-model="search" size="small" placeholder="搜索" />
      </template>
      <template v-slot="scope">
        <el-button type="success" size="small" @click="authHrInfo($event, scope.row.id, scope.$index)">认证通过</el-button>
        <el-button type="danger" size="small" @click="unAuthHrInfo($event, scope.row.id, scope.$index)">取消认证</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import router from "@/router";
import { reactive, computed, ref } from "vue";
import { ElMessage } from 'element-plus'
import { getHrInfoList, authHr, unAuthHr } from "../../utils/request";
const data = reactive({
  isReplied: false,
  pageSize: 10,
  pageNumber: 1,
  hrInfo: []
})

getHrInfoList(data).then(res => {
  if (res.data.code != 200) {
    ElMessage.error(res.data.message || '请求失败')
  } else {
    data.hrInfo = res.data.data
  }
})

function authHrInfo(event, id, index) {
  authHr(id).then(res => {
    if (res.data.code != 200) {
      ElMessage.error(res.data.message || '认证失败')
    } else {
      ElMessage.success(res.data.message || '请求成功')
    }
    router.push("/white")
  })
}
function unAuthHrInfo(event, id, index) {
  unAuthHr(id).then(res => {
    if (res.data.code != 200) {
      ElMessage.error(res.data.message || '取消认证失败')
    } else {
      ElMessage.success(res.data.message || '请求成功')
    }
    router.push("/white")
  })
}

// 表格字段为空操作
const cellStyle= ({ row, column, rowIndex, columnIndex })=> {
  if (row[column.property] == null) {
    row[column.property] = '--'
  }
}
// 表格搜索，使用计算属性
const search = ref('')
const filterTableData = computed(() =>
data.hrInfo.filter(
    (data) =>
      !search.value ||
      data.name.includes(search.value) ||
      data.age == search.value ||
      data.gender.includes(search.value) ||
      data.email.includes(search.value) ||
      data.phone.includes(search.value) ||
      data.personNumber.includes(search.value) ||
      data.address.includes(search.value) ||
      data.status==search.value ||
      data.isAttestation == search.value
  )
)
</script>
<style>
.tabledata {
  width: 100%;
}

.el-table__row,
.el-table__cell {
  height: 60px;
}
</style>
      